<!--
 * @author: 十一
 * @since: 2024-04-09
 * user-info.vue
 * @desc: new page
-->
<template>
  <pageHeader title="个人中心">
    <template #S1>
      <a-button type="primary" v-if="buttonStatus" @click="handleEdit()">修改用户信息</a-button>
      <a-button type="primary" v-if="!buttonStatus" @click="handleSave()">保存</a-button>
    </template>
  </pageHeader>
  <a-row>
    <a-col :span="20">
      <a-row>
        <a-col :span="4">头像</a-col>
        <a-col :span="20">
          <div v-if="buttonStatus">
            <img
              :src="userInfo.avatar_url"
              alt=""
              srcset=""
              style="border-radius: 50%; width: 80px; height: 80px"
            />
          </div>
          <a-input v-else></a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">昵称</a-col>
        <a-col :span="20">
          <div v-if="buttonStatus">
            {{ userInfo.nickname }}
          </div>
          <a-input v-else></a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">手机号</a-col>
        <a-col :span="20">
          <div v-if="buttonStatus">
            {{ userInfo.phone_number }}
          </div>
          <a-input v-else></a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">邮箱</a-col>
        <a-col :span="20">
          <div v-if="buttonStatus">
            {{ userInfo.email }}
          </div>
          <a-input v-else></a-input>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="4">性别</a-col>
        <a-col :span="20">
          <div v-if="buttonStatus" class="grey">
            {{ userInfo.gender }}
          </div>

          <a-radio-group v-model:value="value" v-else>
            <a-radio :value="0">男</a-radio>
            <a-radio :value="1">女</a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import pageHeader from '@/components/pageHeader.vue'
import { useUserInfoStore } from '@/stores/userinfoStrore'
import { ref } from 'vue'
let { userInfo } = useUserInfoStore()
let buttonStatus = ref(true)
const value = ref<number>(0)
function handleEdit() {
  buttonStatus.value = false
}
function handleSave() {
  buttonStatus.value = true
}
</script>

<style lang="less" scoped>
.ant-row {
  line-height: 80px;
  .ant-col-18 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
  }
}
.ant-col-8 {
  background: url('../../assets/images/logo_01.png') no-repeat center;
}
.introduce {
  font-size: 18px;
}
</style>
